<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    var box = document.querySelector("#box");
    // 初始要执行一次
    var d = getDate();
    box.innerHTML = d.year + "年"+ d.month +"月"+ d.date +"日 "+ d.day +" "+ d.hours +":"+ d.minutes +":"+ d.seconds;
    
    // 每个一秒执行一次
    setInterval(function(){
        var d = getDate();
        box.innerHTML = d.year + "年"+ d.month +"月"+ d.date +"日 "+ d.day +" "+ d.hours +":"+ d.minutes +":"+ d.seconds;
    }, 1000);

    // 注意：两秒走一次，或者一秒走两次

    // js的执行原理：异步单线程执行
    // 计时器并不是真正的计时器
    // 时间会受到别的程序的干扰

    // 请求动画帧（目前仅做了解）
    // requestAnimationFrame(function(){
    //     console.log(1);
    // })
    
    
    
// 获取日期对象的每一部分，为了方便日期的格式化
function getDate(){
    var d = new Date();
    var y = d.getFullYear();
    var m = d.getMonth() + 1;
    var mydate = d.getDate();

    var myday = d.getDay();
    switch(myday){
        case 0:myday = "星期日";break;
        case 1:myday = "星期一";break;
        case 2:myday = "星期二";break;
        case 3:myday = "星期三";break;
        case 4:myday = "星期四";break;
        case 5:myday = "星期五";break;
        case 6:myday = "星期六";break;
    }

    var h = d.getHours();
    var muts = d.getMinutes();
    var s = d.getSeconds();

    var mls = d.getMilliseconds();

    return {
        year:y,
        month:cz(m),
        date:cz(mydate),
        day:myday,
        hours:cz(h),
        minutes:cz(muts),
        seconds:cz(s)
    }
}

// 数值补零
function cz(n){
    return n<10 ? "0"+n : n;
}
</script>
</html>